<!-- 流量归档 -->
<template>
  <search-table
      :columns="trafficCol" 
      :data="trafficList"
      :total="trafficTotal"
      :page="queryParams.pageIndex"
      :size="queryParams.pageSize"
      @change-page="getTargetPage"
      @change-size="getTargetSize"
    >
    <template slot="search">
      <Button
        type="primary"
        ghost
        @click="showAddAndUpdate('')"
        style="margin-right: 15px"
      >
        <!-- :disabled="disabledAllBtn" -->
        <Icon type="md-add" />
        添加流量归档
      </Button>
      <Input
        v-model.trim="queryParams.fileName"
        placeholder="名称"
        clearable
        style="width: 150px; margin-right: 15px"
        @on-change="getFlowRecordList(1)"
      ></Input>
      <Select filterable
        v-model="queryParams.status"
        placeholder="状态"
        clearable
        transfer
        style="width: 150px"
        @on-change="getFlowRecordList(1)"
      >
        <Option value="0">进行中</Option>
        <Option value="1">停止</Option>
        <Option value="2">完成</Option>
        <Option value="3">失败</Option>
      </Select>
    </template>
    <Modal
      v-model="targetModal.show"
      :title="targetModal.title"
      :loading="targetModal.loading"
      width="587"
      class="account-target-modal"
      :mask-closable="false"
      @on-visible-change="modalVisibleChange"
      @on-cancel="trafficClose('formValidate')"
      @on-ok="trafficSubmit('formValidate')"
    >
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="80"
      >
        <FormItem label="名称" prop="fileName">
          <Input
            v-model="formValidate.fileName"
            placeholder="请输入名称"
            clearable
            :maxlength="64"
          ></Input>
        </FormItem>
        <FormItem label="类型" prop="fileType">
          <Select filterable
            v-model="formValidate.fileType"
            placeholder="请选择类型"
            clearable
            transfer
          >
            <Option value="'pcap">PCAP</Option>
            <Option value="pcapng">PCAPNG</Option>
          </Select>
        </FormItem>
        <FormItem label="时间" prop="Dates">
          <DatePicker
            :editable="false"
            type="datetimerange"
            :value="formValidate.Dates"
            format="yyyy-MM-dd HH:mm:ss"
            placement="bottom-start"
            confirm
            ref="datePicker"
            placeholder="选择日期"
            transfer
            @on-ok="clickOkBtn"
            @on-clear="clickClearBtn"
            @on-change="changeDates"
          ></DatePicker>
        </FormItem>
        <FormItem label="过滤条件" prop="screen">
          <!-- <Input
            v-model="formValidate.screen"
            placeholder="过滤条件"
            clearable
          ></Input> -->

          <div style="display: flex">
            <Select filterable
              v-model="addFilter.key"
              placeholder="请选择字段"
              clearable
              transfer
              style="width: 160px; margin: 0px"
            >
              <!-- <Option v-for="item in queryObj" :value="item" :key="item">
                {{ item }}
              </Option> -->
              <Option
                v-for="(item, index) in sessionData"
                :value="item.dto || item.key"
                :key="index"
                @click.native="getMoreParams(item)"
              >{{ item.value }}</Option>
            </Select>
            <Select filterable
              v-model="addFilter.condition"
              placeholder=""
              transfer
              class="condition_radius"
              style="width: 90px; margin-right: 0px"
            >
              <Option
                v-for="(value, key, index) in conditionItem"
                :key="index"
                :value="key"
              >{{ value }}</Option>
            </Select>
            <Select filterable
              v-if="selectType == 'select'"
              v-model="addFilter.selectValue"
              placeholder=""
              clearable
              transfer
              class="condition_radius"
              style="width: 150px; margin-right: 0px"
            >
              <Option
                v-for="(item, index) in sessionSelectValue"
                :value="item.value"
                :key="item.id || index"
              >{{ item.value }}</Option>
            </Select>
            <Input
              v-else
              v-model.trim="addFilter.value"
              placeholder=""
              clearable
              style="width: 160px; margin: 0px"
            ></Input>
            <Button
              type="info"
              :disabled="
                !(addFilter.value || addFilter.selectValue) && !addFilter.key
              "
              style="height: 32px; border-radius: unset"
              @click="addQueryParams"
            >
              <Icon type="ios-add" size="14" />
              添加
            </Button>
          </div>
          <div style="margin-top: 10px" v-if="queryFiltering.length > 0">
            <Tag
              type="border"
              color="primary"
              closable
              v-for="(item, index) in queryFiltering"
              :key="index"
              @on-close="handleDeleteTag(item)"
            >
              {{
                item.key +
                " " +
                conditionText(item.condition) +
                " " +
                item.value
              }}
            </Tag>
          </div>
        </FormItem>

        <FormItem label="描述" prop="description">
          <Input
            v-model="formValidate.description"
            placeholder="请输入描述"
            clearable
            type="textarea"
            :maxlength="200"
            :autosize="{ minRows: 2, maxRows: 5 }"
          ></Input>
        </FormItem>
      </Form>
    </Modal>
    <Modal
      :value="progress.show"
      title="下载进度"
      width="500"
      :mask-closable="false"
      footer-hide
      @on-visible-change="change"
    >
      <Progress
        :percent="progress.progress"
        :stroke-width="20"
        :status="progress.status"
        text-inside
      />
    </Modal>
</search-table>
</template>

<script>
import { debounce } from '@/libs/utils';
// import { categoryMixin } from '../hw/mixins';
import { downloadFile } from '@/api/compitionStatic';
import {getFlowRecordList,addFlowRecord,deleteFlowRecord,stopFlowRecord,restartFlowRecord,fullFlowDown,sessionDetailKey,sessionKeyValue,trafficArchivingDownFileId} from '@/api/integration3d';
export default {
  name: 'trafficArchiving',
  props: ['type', 'disabledAllBtn'],
  components: {  },
  // mixins: [categoryMixin],/
  data () {
    const validateNum = (rule, value, callback) => {
      //验证只能填入数字
      var reg = new RegExp('^([1-9]|[1-9]\\d|100)$');
      //验证警戒值
      if (value) {
        if (!reg.test(value)) {
          callback(new Error('请输入1-100的整数'));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const validateDate = (rule, value, callback) => {
      //验证只能填入数字
      //验证警戒值
      if (value) {
        if (!this.formValidate.startTime || !this.formValidate.endTime) {
          callback(new Error('请选择时间'));
        } else if (
          new Date(value[1]).getTime() - new Date(value[0]).getTime() >
          7 * 24 * 60 * 60 * 1000
        ) {
          callback(new Error('最长时间间隔为一周'));
        } else if (
          new Date(this.formValidate.endTime).getTime() -
          new Date(this.formValidate.startTime).getTime() <
          60 * 60 * 1000
        ) {
          callback(new Error('起止时间最小间隔一个小时'));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    return {
      targetModal: {
        show: false,
        title: '添加流量归档',
        loading: true,
        type: 1 //1添加，2修改
      },

      queryParams: {
        pageIndex: 1,
        pageSize: 10,
        fileName: '',
        fileType: '',
        status: '',
        // projectId: this.$route.query.prjid,
        sceneId: this.$route.query.id
        // sceneId:'53827a42-3f3f-4798-96b7-c96f46702010'
        //  sceneId:'278e1617-8242-4d64-a73e-75e8aac3f66c'
      },

      trafficList: [],
      trafficTotal: 0,
      trafficCol: [
        {
          title: '名称',
          key: 'fileName',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          placement: 'top-left',
          width: 240
        },
        {
          title: '类型',
          key: 'fileType',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 100,
          placement: 'top-left'
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 100,
          placement: 'top-left',
          filter:(status)=>{
            let statusText = '-'
            if(status == 0){
              statusText = '进行中'
            }else if(status == 1){
              statusText = '停止'
            }else if(status == 2){
              statusText = '完成'
            }else if(status == 3){
              statusText = '失败'
            }
            return statusText
          }
        },
        {
          title: '数据包大小',
          key: 'flieSize',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 100,
          show:true
          // placement: 'top-left'
        },
        // {
        //   title: '类别',
        //   key: 'category',
        //   align: 'center',
        //   ellipsis: true,
        //   tooltip: true,
        //   width: 100,
        //   placement: 'top-left',
        //   render: (h, { row: { category } }) => {
        //     return h('span', this.filterCategory(category));
        //   }
        // },
        {
          title: '开始时间',
          key: 'startTime',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          minWidth: 120,
        },
        {
          title: '结束时间',
          key: 'endTime',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          minWidth: 130,
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          minWidth: 130,
        },
        {
          title: '描述',
          key: 'description',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          minWidth: 130,
        },
        {
          title: '操作',
          width: 310,
          // placement: 'top-right',
          key:'action',
          align: 'center',
          fixed: 'right',
          opList:[
            {
              txt:'停止',
              on: {
                click: (data) => {
                  // console.log('===停止');
                  this.stopFlowRecord(data.id)
                }
              },
              disabled: (data) => {
                let disabled = !['0'].includes(data.status)
                return disabled
              },
            },
            {
              txt:'下载',
              on: {
                click: (data) => {
                  this.fullFlowDown(data.taskId,data.fileType)
                }
              },
              disabled: (data) => {
                let disabled = ['0','1','3'].includes(data.status)
                return disabled
              },
            },
            {
              txt:'重新开始',
              on: {
                click: (data) => {
                  this.restartFlowRecord(data.id)
                }
              },
              disabled: (data) => {
                let disabled = ['0'].includes(data.status)
                return disabled
              },
            },
            {
              txt:'流量分析',
              on: {
                click: (data) => {
                  this.toFileList(data)
                }
              },
              show:true,
            },
            {
              txt:'删除',
              type:'delete',
              on: {
                click: (data) => {
                  this.deleteFlowRecord(data.id)
                }
              },
              disabled: (data) => {
                let disabled = ['0'].includes(data.status)
                return disabled
              },
            }
          ],
          // render: (h, params) => {
          //   return h('div', [
          //     h('Button', {
          //       props: {
          //         type: 'primary',
          //         size: 'small',
          //         ghost: true,
          //       },
          //       style: {
          //         marginRight: '5px'
          //       },
          //       on: {
          //         click: () => {
          //           console.log('===停止');
          //           this.stopFlowRecord(params.row.id || 12)
          //         }
          //       }
          //     }, '停止'),
          //     h('Button', {
          //       props: {
          //         type: 'primary',
          //         size: 'small',
          //         ghost: true,
          //       },
          //       style: {
          //         marginRight: '5px'
          //       },
          //       on: {
          //         click: () => {
          //           // this.showAddAndUpdate()
          //           this.fullFlowDown(params.row)
          //           console.log('====下载');
          //         }
          //       }
          //     }, '下载'),
          //     h('Button', {
          //       props: {
          //         type: 'primary',
          //         size: 'small',
          //         ghost: true,
          //       },
          //       style: {
          //         marginRight: '5px'
          //       },
          //       on: {
          //         click: () => {
          //           console.log('====重新开始');
          //           this.restartFlowRecord(params.row.id || 12)
          //         }
          //       }
          //     }, '重新开始'),
          //     h('Button', {
          //       props: {
          //         type: 'primary',
          //         size: 'small',
          //         ghost: true,
          //       },
          //       style: {
          //         marginRight: '5px'
          //       },
          //       on: {
          //         click: () => {
          //           console.log('====流量分析');
          //           this.toFileList(params.row)
          //         }
          //       }
          //     }, '流量分析'),
          //     h(
          //       'Poptip',
          //       {
          //         props: {
          //           confirm: true,
          //           'ok-text': '确定',
          //           'cancel-text': '取消',
          //           type: 'error',
          //           size: 'large',
          //           title: '你确定要删除吗?',
          //           transfer: true
          //         },
          //         on: {
          //           'on-ok': () => {
          //             console.log('=====删除');
          //             this.deleteFlowRecord(params.row.id)
          //           }
          //         }
          //       },
          //       [
          //         h(
          //           'Button',
          //           {
          //             props: {
          //               type: 'error',
          //               size: 'small',
          //               ghost: true,
          //             },
          //             style: {
          //               // border: 'none',
          //               // background: 'none',
          //               // boxShadow: 'none'
          //             }
          //           },
          //           '删除')
          //       ]
          //     )
          //   ]);
          // }
        }
      ],

      // 表单
      formValidate: {
        fileName: '',
        fileType: '',
        Dates: [],
        queryConditionVOS: [],
        description: '',
        screen: '',
        sceneId: this.$route.query.id,
        // sceneId:'53827a42-3f3f-4798-96b7-c96f46702010'
        // sceneId:'278e1617-8242-4d64-a73e-75e8aac3f66c'
      },
      ruleValidate: {
        fileName: [{ required: true, message: '请输入名称', trigger: 'change' }],
        fileType: [{ required: true, message: '请选择类型', trigger: 'change' }],
        Dates: [
          { required: true, type: 'array', message: '不能为空', trigger: 'change' },
          { validator: validateDate, trigger: 'change' }
        ],
        // screen: [{ required: true, message: '请选择虚拟机', trigger: 'change' }],

      },

      // 筛选值
      queryObj: {},
      // 定义赋值
      queryFiltering: [],
      // conditionObj: {
      //   eq: '=',
      //   ne: '!=',
      //   //   lt: '<',
      //   //   le: '<=',
      //   //   gt: '>',
      //   //   ge: '>=',
      //   //   like: 'like',
      //   //   match: 'Match',
      // },
      conditionObj: {
        eq: '=',
        ne: '!=',
        lt: '<',
        le: '<=',
        gt: '>',
        ge: '>=',
        like: 'like',
        match: 'Match',
        leftLike: 'left-like',
        rightLike: 'right-like',
      },
      // 筛选条件
      addFilter: {
        key: '',
        value: '',
        condition: 'eq',
        selectValue: '',
      },
      // 根据接口 key 和运算符
      sessionData: [],
      // 获取动态运算符
      conditionItem: {
        eq: '=',
        ne: '!=',
      },
      // 根据key 值获取 value  仅在有下拉情况下有内容
      sessionSelectValue: [],
      selectType: 'text',
      progress: {
        show: false,
        progress: 0,
        status: 'active'
      },

    };
  },
  filters: {},
  computed: {},
  mounted () {
    this.getFlowRecordList()
  },
  methods: {
    // 获取列表信息
    getFlowRecordList (val) {
      if (val) {
        this.queryParams.pageIndex = val
      }
      let params = this.queryParams
      getFlowRecordList(params.sceneId, params).then(res => {
        if (res.code == 1) {
          // console.log('====', res.data.items);
          this.trafficList = res.data.items
          // this.trafficList = [{
          //       "fileName": "1212222",
          //       "createTime": "2024-03-26 16:24:37",
          //       "sceneId": "2f2eaa2c-7854-4c12-9598-0b7a46cacfaa",
          //       "description": "1212",
          //       "screen": "",
          //       "startTime": "2024-03-25 00:00:00",
          //       "id": "F8e46fe7-ce80-4323-b416-1ed736ab71c9",
          //       "endTime": "2024-03-26 00:00:00",
          //       "fileType": "'pcap",
          //       "taskId": "loHceY4BONeybLUJfmgF",
          //       "status": "0"
          //   }]
          this.trafficTotal = res.data.total
        } else {
          this.trafficList = []
          this.trafficTotal = 0
          this.$Message.warning(res.message)
        }
      }).catch(error => {
        this.$Message.error(error)
      })
    },

    // 时间选择
    clickClearBtn () {
      this.formValidate.Dates = []
      this.clickOkBtn()
    },
    changeDates (timeList) {
      if (timeList[0]) {
        this.formValidate.Dates = timeList
        this.formValidate.startTime = timeList[0]
        this.formValidate.endTime = timeList[1]
      } else {
        this.formValidate.Dates = []
        this.formValidate.startTime = ''
        this.formValidate.endTime = ''
      }
    },
    clickOkBtn () {
      // this.isClickOkBtn = true
    },

    // 提交
    trafficSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.formValidate))
          delete params.Dates
          addFlowRecord(params).then(res => {
            if (res.code == 1) {
              this.initAddFilter()
              this.$refs[name].resetFields();
              this.$Message.success(res.message)
              this.getFlowRecordList()
              this.targetModal.show = false;
            } else {
              this.$Message.warning(res.message);
              this.cancelLoading('targetModal');
            }
          }).catch((error) => {
            this.$Message.error(error);
            this.cancelLoading('targetModal');
          });
        } else {
          this.cancelLoading('targetModal');
        }
      });
    },

    // 过滤条件初始化
    initAddFilter(){
      this.addFilter.key = ''
      this.addFilter.value = ''
      this.addFilter.selectValue = ''
      this.addFilter.condition = 'eq'
      this.queryFiltering = []
    },

    // 取消保存
    trafficClose (name) {
      this.$refs[name].resetFields();
      this.initAddFilter()
      this.addTarget = false;
    },

    // 添加任务框
    showAddAndUpdate () {
      // this.sessionDetailKey()
      this.sessionKeyValue()
      this.targetModal.show = true
    },


    // 分配目标的模态框关闭后清空搜索条件
    modalVisibleChange (type) {
      if (!type) {
        this.queryParams.pageIndex = 1;
        this.queryParams.pageSize = 10;
        this.queryParams.fileName = '';
        this.queryParams.status = '';
      }
    },

    // 删除
    deleteFlowRecord (id) {
      deleteFlowRecord(id).then(res => {
        if (res.code == 1) {
          this.getFlowRecordList()
          this.$Message.success(res.message)
        } else {
          this.$Message.warning(res.message)
        }
      }).catch(error => {
        this.$Message.error(error);
      })
    },

    // 停止
    stopFlowRecord (id) {
      stopFlowRecord(id).then(res => {
        if (res.code == 1) {
          this.getFlowRecordList()
          this.$Message.success(res.message)
        } else {
          this.$Message.warning(res.message)
        }
      }).catch(error => {
        this.$Message.error(error);
      })
    },

    // 重新开始
    restartFlowRecord (id) {
      restartFlowRecord(id).then(res => {
        if (res.code == 1) {
          this.getFlowRecordList()
          this.$Message.success(res.message)
        } else {
          this.$Message.warning(res.message)
        }
      }).catch(error => {
        this.$Message.error(error);
      })
    },

    fullFlowDown(taskId,fileType){
      let progress = 0
      trafficArchivingDownFileId(taskId).then(res=>{
        if(res.code == 1){
          this.timer && clearTimeout(this.timer)
          if(res.data.fileState == 'success'){
            this.downloadDrillReport(res.data.fileId, fileType)
          }else if(res.data.fileState == 'error'){
            // this.timer && clearTimeout(this.timer)
            this.$Message.warning(res.data.fileMsg || '下载失败！找不到文件信息')
          }else if(res.data.fileState == 'loading'){
            // this.timer && clearTimeout(this.timer)
            this.timer = setTimeout(() => {
              this.fullFlowDown(taskId, fileType)
            },10 * 1000)
          }
          this.generatedownFileProgress(progress)
        }else{
          this.$Message.warning(res.message)
        }
      }).catch(error=>{
        console.log(error);
      })
    },

    downloadDrillReport (taskId, fileType) {
      // this.progress.show = true
      let flag = false // 不存在文件，进度条控制为0
      downloadFile(taskId, this.downFileProgress).then(res => {
        console.log('🚀 ~ downloadFile ~ res:', res)
        this.totalProgress = 0
        // if (res.type == 'application/octet-stream') {
        if (!res.code) {
          const link = document.createElement("a");
          const href = window.URL.createObjectURL(res);
          link.href = href;
          link.download = `${this.$route.query.name}-数据包.${fileType}`;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        } else {
          flag = true
          this.progress.status = 'wrong'
          // this.$Message.error('下载文件失败!不存在文件数据！');
          this.$Message.error('任务未完成或没有产生文件，请稍后重试');
        }
      }).catch(error => {
        this.progress.status = 'wrong'
        this.$Message.error('下载失败!');
      }).finally(() => {
        if (flag) {
          this.progress.progress = 0
        } else {
          this.progress.progress = 100
        }
        setTimeout(() => {
          this.progress.show = false
          this.progress.status = 'active'
          this.progress.progress = 0
        }, 2000)

      })
    },

    // 再定义一个生成进度显示
    generatedownFileProgress(progress=0){
      this.progress.show = true
      this.progress.progress = progress;
    },

    // 进度
    downFileProgress (progress) {
      let currentProgress = progress.loaded * 1; //B单位
      if (this.totalProgress) {
        this.totalProgress += currentProgress
      } else {
        this.totalProgress = currentProgress
      }
      currentProgress = this.totalProgress - currentProgress ? currentProgress : currentProgress / 2;
      let rate = (((this.totalProgress - currentProgress) / this.totalProgress) * 100).toFixed(2) * 1;
      if (!this.rate || rate > this.rate) {
        this.progress.progress = rate;
      }
    },

    change (val) {
      this.progress.show = val
    },

    // 查看全流量
    toFileList (row) {
      console.log(row);
      this.$router.push({
        path: '/fileAnalysis',
        query: {
          sceneName: '流量分析',
          name: this.$route.query.name,
          prjid: this.$route.query.prjid,
          id: this.$route.query.id,
          page: this.$route.query.page
        }
      });

    },

    // 获取协议
    sessionDetailKey () {
      sessionDetailKey().then(res => {
        if (res.code == 1) {
          this.queryObj = res.data
          console.log('🚀 this.queryObj:', res.data)
        } else {
          this.queryObj = {}
          this.$Message.warning(res.message)
        }
      }).catch(error => {
        this.$Message.error(error)
      })
    },

    // 根据值获取筛选值
    sessionKeyValue (key, type) {
      if (type == 'text') return;
      let params = {
        // TrafficArchiving 流量归档   TrafficRetrieval 流量检索(会话详情)
        capacity: 'TrafficArchiving',
        key: key || '',
        pageIndex: 1,
        pageSize: 9999
      }
      sessionKeyValue(params).then(res => {
        if (res.code == 1) {
          if (!key) {
            this.sessionData = res.data.items
          } else {
            this.sessionSelectValue = res.data.items
          }
        } else {
          this.$Message.warning(res.message)
        }
      }).catch(error => {
        this.$Message.error(error)
      })
    },
    
    getMoreParams (item) {
      item.conditionList.forEach(items => {
        this.conditionItem[items] = this.conditionObj[items]
      });
      console.log('🚀this.conditionItem:', this.conditionItem)
      this.selectType = item.type
      this.sessionKeyValue (item.key,item.type)
      // this.sessionKeyValue('l7ProtocolId', 'select')
      // this.selectType = 'select'
    },


    // 初始化条件
    initSessionKeyValue () {
      this.addFilter.key = ''
      this.addFilter.value = ''
      this.addFilter.selectValue = ''
      this.addFilter.condition = 'eq'
      this.sessionSelectValue = []
      this.selectType = 'text'
      this.conditionItem = {
        eq: '=',
        ne: '!=',
      }
    },

    addQueryParams () {
      if (!this.addFilter.key || !(this.addFilter.value || this.addFilter.selectValue)) return;
      this.queryFiltering.push({
        key: this.addFilter.key,
        value: this.addFilter.value || this.addFilter.selectValue,
        condition: this.addFilter.condition,
        index: this.queryFiltering.length + 1
      })
      // this.addFilter.key = ''
      // this.addFilter.value = ''
      // this.addFilter.condition = 'eq'
      this.initSessionKeyValue()
      this.changeQuery()

    },

    handleDeleteTag (row) {
      let index = this.queryFiltering.findIndex(item => item.index == row.index);
      if (index > -1) {
        this.queryFiltering.splice(index, 1)
      }
      this.changeQuery()
    },

    // 条件变化赋值
    changeQuery () {
      this.formValidate.queryConditionVOS = this.queryFiltering.map(item => {
        return {
          key: item.key,
          value: item.value,
          condition: item.condition,
        }
      })
      console.log('=== this.queryParams==', this.formValidate);
    },


    // 统一使用关闭loading
    cancelLoading (name) {
      this[name].loading = false;
      setTimeout(() => {
        this[name].loading = true;
      });
    },

    // 分页
    getTargetSize (size) {
      this.queryParams.pageSize = size;
      this.getFlowRecordList();
    },
    getTargetPage (page) {
      this.queryParams.pageIndex = page;
      this.getFlowRecordList();
    },

    // 符号转换
    conditionText (val) {
      let str = ''
      switch (val) {
        case "eq": str = '='; break;
        case "ne": str = '!='; break;
        case "lt": str = '<'; break;
        case "le": str = '<='; break;
        case "gt": str = '>'; break;
        case "ge": str = '>='; break;
        case "like": str = 'like'; break;
        case "match": str = 'match'; break;
        default: str = '-'; break;
      }
      return str;
    },
  }
}
</script>

<style>
.drillsTable .ivu-poptip-body {
  text-align: left !important;
}
.scenesHeader {
  margin-bottom: 16px;
}
.drillTables {
  min-height: 300px;
}
.drillsTable.ivu-table-wrapper {
  overflow: inherit;
}
</style>
<style scoped>
.account-target-modal >>> .starlet {
  color: red;
  position: absolute;
  left: -60px;
  font-size: 18px;
  line-height: 38px;
  font-weight: 800;
}
.account-target-modal >>> .pageStyleVm {
  text-align: center;
  margin-top: 10px;
}
.targetHeader {
  /*padding: 10px;*/
  margin: 15px 0px;
}
/* .account-target-modal /deep/ .ivu-modal {
  height: calc(100vh - 200px);
  min-height: 520px;
} */
.account-target-modal /deep/ .ivu-modal .ivu-modal-content {
  height: 100%;
}
.account-target-modal /deep/ .ivu-modal .ivu-modal-content .ivu-modal-body {
  height: calc(100% - 112px);
}
.search-group {
  width: calc(100% + 32px);
  margin-left: -16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8eaec;
}
.account-target-modal
  /deep/
  .ivu-modal
  .ivu-modal-content
  .ivu-modal-body
  > form {
  height: calc(100% - 65px);
  overflow: auto;
}
.account-target-modal .ivu-date-picker {
  display: block;
}
</style>
